<template>
	<el-row><el-button type="success" @click="openDialog">新增轮播图</el-button></el-row>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column prop="name" label="名字" width="120" show-overflow-tooltip/>
		<el-table-column prop="target" label="跳转链接"  show-overflow-tooltip/>
		<el-table-column prop="url" label="图片路径" show-overflow-tooltip/>
		<el-table-column prop="图片" width="120">
			<template #default="scope">
				<el-image
					style="width: 100px; height: 100px"
					:src="scope.row.url"
					:zoom-rate="1.2"
					:preview-src-list="srcList"
					:initial-index="scope.$index"
					preview-teleported
					fit="cover"
				/>
			</template>
		</el-table-column>
		<el-table-column label="操作" width="120">
			<template #default="scope">
				<el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<Dialog ref="dialog" @closeDialog="onCloseDialog($event, getList)" v-if="showDialog"></Dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
//请求
const { proxy } = getCurrentInstance();
import { getCurrentInstance } from 'vue';
import Dialog from './Dialog.vue';
import useDialog from '@/hooks/useDialog';
const { dialog, showDialog, openDialog, onCloseDialog } = useDialog;
const tableData = ref([]);
const srcList = ref([]);

getList();
function getList() {
	proxy.$get('/banner').then(res => {
		console.log(res);
		if (res.code === 200) {
			tableData.value = res.list;
			srcList.value = res.list.map(item => item.url);
		}
	});
}
function handleDelete(id) {
	console.log('click');
	ElMessageBox.confirm('是否确认删除该图片?', '警告!!', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			proxy
				.$post('/banner/delete/'+id, {
					id
				})
				.then(res => {
					if (res.code === 200) {
						ElMessage({
							message: '删除成功',
							type: 'success'
						});
						getList();
					}
				});
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '取消删除'
			});
		});
}
</script>

<style scoped lang="less"></style>
